<template>
  <a-layout>
    <div v-show="buildInfo.success" ref="preview" class="jm-com-preview">

    </div>
    <div v-show="!buildInfo.success" class="jm-com-build-error">
      xml文件配置异常，请参考文档编写xml
    </div>
  </a-layout>
</template>

<script>

import { createPage } from 'yt-engine'
import customs from '../debug'
import { getDataFromConfig, normalizeConfig } from 'cli/engine/config'

export default {
  inject: ['jmProvide'],
  data() {
    return {
      buildInfo: {
        success: true
      }
    }
  },
  computed: {
    clazzType() {
      return this.$route.params.clazzType
    },
    version() {
      return this.$route.params.version
    },
    current() {
      return this.jmProvide.xmls.find(item=> {
        return item.clazzType === this.clazzType && item.version == this.version
      })
    }
  },
  watch: {
    current(current) {
      if(current) {
        this.recreatePage() 
      }
    }
  },
  methods: {
    createXml(name, version) {
      version = version || 1
      const { xml } = this.jmProvide.xmls.find(item => {
        return item.clazzType === name && item.version == version
      })

      return xml
    },
    createConfig(name, version, options={}) {
      const xml = this.createXml(name,version)

      if(!xml) {
        return {
          ...options,
          clazzType: name,
          version: version
        }
      } else {
        const config = normalizeConfig(xml)

        const data = getDataFromConfig(config)

        this.jmProvide.log(`初始化组件 ${name} ${version}: `, data)

        return {
          ...options,
          ...data,
          clazzType: name,
          version: version
        }
      }
    },
    buildByXml() {
      const { xml } = this.current

      if(!xml) {
        this.buildInfo.success = false
      } else {
        this.buildInfo.success = true

        return this.createConfig(this.clazzType, this.version)
      }

      return {
        clazzType: this.clazzType,
        version: this.version
      }

    },
    recreatePage() {
      if(this._page) {
        this._page.destroy()
        if(this.$refs.preview) {
          this.$refs.preview.innerHTML = ''
        }
      }

      this.$nextTick(()=> {
        if(this.clazzType !== 'custom') {
          // 通过xml构建该组件
          const config = this.buildByXml()

          if(this.buildInfo.success) {
            this._page = createPage()

            this._page.appendComponent(config)
          }
        } else {

          // 自定义构建方式
          const custom = customs[this.version]

          this.buildCustom(custom)
        }

        this._page.start(this.$refs.preview)

      })

    },
    buildCustom({ layout=[] }) {
      this._page = createPage()

      layout.forEach(componentConfig=> this.buildCustomComponent(componentConfig))
    },
    buildCustomComponent({ name, version, data, slots }, parent) {
      const config = this.createConfig(name,version,data)
      let current = null
      if(!parent) {
        current = this._page.appendComponent(config)
      } else {
        const { tag, index, id } = parent
        current = this._page.appendComponent(config, id, tag, index)
      }

      if(slots) {
        try{
          Object.keys(slots).forEach(slotName => {
            const content = slots[slotName]

            content.forEach((tag, index) => {
              tag.forEach((componentConfig) => {
                this.buildCustomComponent(componentConfig, { id: current.getId(), tag: slotName, index })
              })
            })
          })
        }catch(e) {
          console.error(e)
        }
      }
    }
  },
  beforeDestroy() {
    if(this._page) {
      this._page.destroy()
      if(this.$refs.preview) {
        this.$refs.preview.innerHTML = ''
      }
    }
  },
  mounted() {
    if(this.current) {
      this.recreatePage()
    }
  }
}
</script>

<style lang='less'>
  .jm-com-build-error {
    text-align: center;
    padding: 80px;
  }

  .jm-com-preview {
    padding: 80px;
    width: 100%;
  }
</style>
